<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heard">
			<view class="heardTitle">
				<text>积分商城</text>
			</view>
		</view>

		<view class="main" v-if="!headeListState">
			<view v-for="(item,index) in headeList" :key="index" @click="changeBtn(index,item)">
				<view :class="index===xuanzhong?'mainCaseActive':'mainCase'">
					<view class="mainCaseImg">
						<image class="mainCaseGJ" :src="item.goodsImg" />
					</view>
					<view class="mainCaseBiaoqian" v-if="index===xuanzhong">
						<text>{{item.hasFlag==='1'?'使用中':'已选中'}}</text>
					</view>
					<view class="mainCasetitle">
						<text>{{item.goodsName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="headeListState">
			<u-empty
					mode="car"
					text="暂无数据"
					icon="https://www.afbeijing.net/static_resources/assets/empty.png"
					textColor="#808080"
					textSize="36rpx"
			>
			</u-empty>
		</view>
		<view class="footBtn" v-if="!headeListState">
			<view class="bottom-button" @click="save">保存</view>
		</view>
	</view>
</template>

<script>
	import { selectMyFeature,updateFeature } from '../api/index.js'
	export default {
		data() {
			return {
				KeyLine:{},
				headeList:[],
				pageLoading:false,
				xuanzhong: 1,
				headeListState: true
			}
		},
		mounted(){
			this.getInfo()
		},
		methods: {
			//查询已兑换头像框
			getInfo(){
				selectMyFeature({pageNum:1,pageSize:100,}).then(response => {
					console.log(response)
					if (response.code === 0) {
						this.headeList =response.data.list
						if(this.headeList.length>0){
							this.headeListState = false
						}else{
							this.headeListState = true
						}
					}else{
					 uni.$u.toast(response.msg) 
					}
				}).catch(errors => {
								// uni.$u.toast(errors)
				})
			},
			changeBtn(e,key){
				console.log(key)
				this.KeyLine=key
				this.xuanzhong = e
			},
			// 保存头像框
			save() {
				if(this.KeyLine.goodsId){
					updateFeature({goodsId:this.KeyLine.goodsId}).then(response => {
						console.log(response)
						if (response.code === 0) {
							 uni.$u.toast(response.msg)
							 uni.navigateBack({
							   delta: 1  // 这个数字表示返回的层数，1 表示返回上一层
							 });
							// this.headeList =response.data
						}else{
						 uni.$u.toast(response.msg) 
						}
					}).catch(errors => {
									uni.$u.toast(errors)
					})
				}else{
					uni.$u.toast('请选择头像')
				}
				
				// 
				// uni.navigateTo({
				// 	url: '/src/views/pageMine/jifenshangcheng/index' // 这里替换成你实际要跳转的页面路径
				// });
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F2F2F2;
		height: 100vh;
	}

	.heard {
		width: 750rpx;
		height: 242rpx;
		background: #FFB607;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.heardTitle {
		padding-top: 20%;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 59rpx;
	}


	.main {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding-left: 80rpx;
		padding-right: 80rpx;
		width: 100%;
	}

	.mainCase {
	  position: relative;
	  width: 240rpx;
	  height: 240rpx;
	  background: #FFFFFF;
	  border-radius: 20rpx;
	  border: 1px solid #CCCCCC;
	  margin-top: 80rpx;
	  text-align: center;
	}
	
	.mainCaseActive {
	  position: relative;
	  width: 240rpx;
	  height: 240rpx;
	  background: #FFFFFF;
	  border-radius: 20rpx;
	  border: 1px solid #FF8106;
	  margin-top: 80rpx;
	  text-align: center;
	}
	
	.mainCaseImg {
	  height: 230rpx;
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.mainCaseGJ {
	  height: 200rpx;
	  width: 200rpx;
	  border-radius: 20rpx;
	  // background-color: #FF8106;
	}
	
	.mainCaseBiaoqian {
	  position: absolute;
	  bottom: -2rpx;
	  right: -2rpx;
	  width: 100rpx;
	  height: 40rpx;
	  background: #FF8106;
	  border-radius: 20rpx;
	  text-align: center;
	  font-weight: 400;
	  font-size: 20rpx;
	  color: #FFFFFF;
	  line-height: 40rpx;
	}
	
	.mainCasetitle {
	  font-weight: 400;
	  font-size: 24rpx;
	  color: #808080;
	  padding-top: 20rpx;
	}
	.footBtn{
		width: 100%;
		height: 140rpx;
		position: absolute;
		bottom: 0rpx;  // 距离底部 20rpx
		background-color: #F2F2F2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom-button {
		width: 550rpx;
		height: 56rpx;
		background: #FF8106;
		border-radius: 28rpx;
		padding: 15rpx 30rpx;  // 内边距
		text-align: center;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.empty{
		height: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>